{% extends "base_site.html" %}

{% block title %}Sign up{% endblock %}

{% block head%}
    {{ block.super }}
    <script src='/media/js/plugins/jquery.validate.js'></script>
    <script>
    
        jQuery.validator.addMethod("accept", function(value, element, param) {
          return value.match(new RegExp("." + param + "$"));
        });
        
        $(function(){
            $('form').validate({
               rules: {
                 username: {
                    accept: "^[a-z][A-Z]$"
                 }
               }
            })
        });
        
    </script>
{% endblock %}

{% block content_header %}<h1>Sign up</h1>{% endblock %}

{% block content %}

<p>Please fill out the registration form (all fields are required), and your account will be created.<br/>
You will be sent an email with instructions on how to complete your registration.</p>

{% if form.errors %}
<p class="error">Please correct the errors below:</p>
{% endif %}

<form method="post" action="">{% csrf_token %}
<table>
<tr>
  <td><label for="id_username">Username:</label></td>
  <td>{{ form.username }}</td>
  {% if form.username.errors %}<td><span class="error">{{ form.username.errors|join:", " }}</span></td>{% endif %}
</tr>
<tr>
  <td><label for="id_email">Email address:</label></td>
  <td>{{ form.email }}</td>
  {% if form.email.errors %}<td><span class="error">{{ form.email.errors|join:", " }}</span></td>{% endif %}
</tr>
<tr>
  <td><label for="id_password1">Password:</label></td>
  <td>{{ form.password1 }}</td>
  {% if form.password1.errors %}<td><span class="error">{{ form.password1.errors|join:", " }}</span></td>{% endif %}
</tr>
<tr>
  <td><label for="id_password2">Password (type again to catch any typos):</label></td>
  <td>{{ form.password2 }}</td>
  {% if form.password2.errors %}<td><span class="error">{{ form.password2.errors|join:", " }}</span></td>{% endif %}
</tr>
<tr><td></td><td><input type="submit" value="Register" /></td></tr>
</table>
</form>
{% endblock %}

{% block sidebar %}
{% endblock %}
